<template>
  <div  style="overflow: auto">
    <div v-for="d in value.data"  :key="d.id" >
      <el-card shadow="hover">
        <el-row :gutter="20">
          <el-col :span="2">
            <el-avatar
              shape="square"
              :size="50"
              :src="
                d.initiatorId == userid
                  ? d.beInvited.headPortrait
                  : d.initiator.headPortrait
              "
            ></el-avatar>
          </el-col>
          <el-col :span="3"
            ><el-tag type="success">
              名称：{{
                d.initiatorId == userid ? d.beInvited.name : d.initiator.name
              }}
            </el-tag>
          </el-col>
          <el-col :span="2"
            ><el-tag type="success"
              >申请状态：{{ d.createFriendsCode }}</el-tag
            ></el-col
          >
          <el-col :span="7">
            <el-tooltip :content="d.remark" placement="bottom" effect="light">
              <el-tag type="success">申请内容：{{ d.remark }}</el-tag>
            </el-tooltip>
          </el-col>
          <el-col
            :span="6"
            v-if="userid == d.beInvitedId && d.createFriendsEnum == 0"
          >
            <div>
              <el-button type="success" @click="ChangeCreateFriends(d.id, 1)"
                >同意</el-button
              >
              <el-button type="warning" @click="ChangeCreateFriends(d.id, 2)"
                >拒绝</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
     <el-pagination
      @size-change="dataSizeChange"
      @current-change="dataChange"
      :current-page="GetCreateFriends.pageNo"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="value.count">
    </el-pagination>
  </div>
</template>

<script>
import EventBus from "../../msg";
import {
  GetCreateFriendsDtos,
  ChangeCreateFriends,
} from "../config/CreateFriend";
import { get, put } from "../util/request";
export default {
  data() {
    return {
      value: {
        data:[],
        count:0
      },
      userid: "",
      GetCreateFriends: {
        pageNo: 1,
        pageSize: 20,
      },
    };
  },
  created() {
    var user = JSON.parse(sessionStorage.getItem("user"));
    this.userid = user.id;
    this.GetCreateFriendsDtos()
    EventBus.$on("FriendData",(data)=>{ 
      if(data.systemMarking===0||data.systemMarking===2){
        this.GetCreateFriendsDtos()
      }
    })
  },
  methods: {
    dataChange(val){
      this.GetCreateFriends.pageNo=val
      this.GetCreateFriendsDtos()
    },
    dataSizeChange(val){
      this.GetCreateFriends.pageSize=val
      this.GetCreateFriendsDtos()
    },
    ChangeCreateFriends(id, state) {
      var data = "?id=" + id + "&create=" + state;
      put(ChangeCreateFriends + data).then((response) => {
        console.log(response);
        if (response.statusCode === 200) {
          this.$message.success("添加成功");
          this.GetCreateFriends.pageNo = 1;
          this.GetCreateFriendsDtos();
        } else {
          this.$message.error(response.message);
        }
      });
    },
    GetCreateFriendsDtos() {
      this.FriendRefresh=false;
      get(GetCreateFriendsDtos, this.GetCreateFriends).then((response) => {
        if (response.statusCode === 200) {
          this.value=response.value
        } else {
          this.$message.error(response.message);
        }
      });
    },
  },
};
</script>

<style>
.cardClass {
  height: 10%;
  width: 80%;
}
</style>
